<template>
  <div class="page-container">
    <div class="page-container_left">
      <div class="page-container_left_top"></div>
      <div class="page-container_left_center"></div>

      <dv-scroll-board class="page-container_left_bottom" :config="config" />
    </div>
    <div class="page-container_center"></div>
    <div class="page-container_right">
      <video
        id="videoElement"
        class="videoBox"
        controls
        autoplay
        muted
        style="object-fit: fill"
      ></video>
      <video
        id="videoElement1"
        class="videoBox1"
        controls
        autoplay
        muted
        style="object-fit: fill"
      ></video>
      <video
        id="videoElement2"
        class="videoBox2"
        controls
        autoplay
        muted
        style="object-fit: fill"
      ></video>
    </div>
  </div>
</template>
<script setup lang="ts">
/**
 * 模块引入
 */
import { reactive, ref, onMounted, computed } from "vue";
import flvjs from "flv.js";

const props = defineProps({
  taskInfo: {
    type: Object,
    default: () => {},
  },
  taskInfo1: {
    type: Object,
    default: () => {},
  },
  taskInfo2: {
    type: Object,
    default: () => {},
  },
});
const config = reactive({
  header: ["姓名", "时间", "值班内容", "电话"],
  data: [
    ["张三", "1点", "三号门", "123456789"],
    ["李四", "2点", "三号门", "123456789"],
    ["王五", "3点", "三号门", "123456789"],
    ["赵六", "4点", "三号门", "123456789"],
    ["田七", "5点", "三号门", "123456789"],
    ["老八", "6点", "三号门", "123456789"],
    ["小九", "6点", "三号门", "123456789"],
    ["十单", "7点", "三号门", "123456789"],
  ],
  index: true,
  columnWidth: [50],
  align: ["center"],
});
// 首先定义flvPlayer为null
const flvPlayer = ref(null);
const taskInfo = computed(() => props.taskInfo);
const createVideo = () => {
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById("videoElement");
    flvPlayer.value = flvjs.createPlayer({
      type: "flv",
      url: "http://localhost:9002/live/1234.flv", //你的url地址
      isLive: true,
      hasAudio: false,
    });
    flvPlayer.value.attachMediaElement(videoElement);
    flvPlayer.value.load();

    setTimeout(function () {
      flvPlayer.value.play();
    }, 300); //处理视频播放错误的语法
    // flvPlayer.value.on('error', () => {
    //   message.error(`视频加载失败，请稍候重试！`);
    //   return false;
    // });
  }
};
const flvPlayer1 = ref(null);
const taskInfo1 = computed(() => props.taskInfo1);
const createVideo1 = () => {
  if (flvjs.isSupported()) {
    var videoElement1 = document.getElementById("videoElement1");
    flvPlayer1.value = flvjs.createPlayer({
      type: "flv",
      url: "http://localhost:9002/live/1234.flv", //你的url地址
      isLive: true,
      hasAudio: false,
    });
    flvPlayer1.value.attachMediaElement(videoElement1);
    flvPlayer1.value.load();

    setTimeout(function () {
      flvPlayer1.value.play();
    }, 300); //处理视频播放错误的语法
    // flvPlayer.value.on('error', () => {
    //   message.error(`视频加载失败，请稍候重试！`);
    //   return false;
    // });
  }
};
const flvPlayer2 = ref(null);
const taskInfo2 = computed(() => props.taskInfo2);
const createVideo2 = () => {
  if (flvjs.isSupported()) {
    var videoElement2 = document.getElementById("videoElement2");
    flvPlayer2.value = flvjs.createPlayer({
      type: "flv",
      url: "http://localhost:9002/live/1234.flv", //你的url地址
      isLive: true,
      hasAudio: false,
    });
    flvPlayer2.value.attachMediaElement(videoElement2);
    flvPlayer2.value.load();

    setTimeout(function () {
      flvPlayer2.value.play();
    }, 300); //处理视频播放错误的语法
    // flvPlayer.value.on('error', () => {
    //   message.error(`视频加载失败，请稍候重试！`);
    //   return false;
    // });
  }
};
// 我的视频是弹窗显示的，所以创建了destroy方法，在子组件中暴露出去后，在父组件调用即可，这样关闭弹窗后，视频流会停止请求。
// const destroy = () => {
//   flvPlayer.value.pause(); //暂停播放数据流
//   flvPlayer.value.unload(); //取消数据流加载
//   flvPlayer.value.detachMediaElement(); //将播放实例从节点中取出
//   flvPlayer.value.destroy(); //销毁播放实例
//   flvPlayer.value = null;
// };
// defineExpose({ destroy });

onMounted(() => {
  createVideo();
  createVideo1();
  createVideo2();
});
</script>
<style lang="scss">
.page-container {
  position: absolute;
  z-index: 12;
  width: 100%;
  height: 100%;
  border: 3px solid red;
  display: flex;
  .page-container_left {
    width: 450px;
    height: 881px;
    display: flex;
    flex-direction: column;
    border: 1px solid orangered;
    .page-container_left_top {
      width: 400px;
      height: 280px;
      background: yellow;
      padding: 10px;
    }
    .page-container_left_center {
      width: 400px;
      height: 280px;
      background: greenyellow;
      padding: 10px;
    }
    .page-container_left_bottom {
      width: 400px;
      height: 280px;
      background: cyan;
      padding: 10px;
    }
  }
  .page-container_center {
    width: 720px;
    height: 456px;
    border: 1px solid red;
    margin-left: 89px;
  }
  .page-container_right {
    width: 450px;
    height: 881px;
    display: flex;
    flex-direction: column;
    border: 1px solid cyan;
    .videoBox {
      width: 400px;
      height: 280px;
      // background: yellow;
      padding: 10px;
    }

    .videoBox1 {
      padding: 10px;
      width: 400px;
      height: 280px;
      // background: yellow;
    }
    .videoBox2 {
      padding: 10px;
      width: 380px;
      height: 280px;
      // background: yellow;
    }
  }
}
</style>
